<style scoped>
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout-nav {
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }

    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout-header-bar {
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    }

    .layout-logo-left {
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }

    .menu-icon {
        transition: all .3s;
    }

    .rotate-icon {
        transform: rotate(-90deg);
    }

    .menu-item span {
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }

    .menu-item i {
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }

    .collapsed-menu span {
        width: 0px;
        transition: width .2s ease;
    }

    .collapsed-menu i {
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
<template>

        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div style="color: white ;float: left;position: relative;top: 0px;left: 0px;">
                        <Icon type="ios-menu" @click="collapsedSider" :class="rotateIcon"></Icon>
                        <MenuItem name="0" to="/yxb_vue/home">优信保公司后台管理系统</MenuItem>
                    </div>
                    <div class="layout-nav">
                        <MenuItem name="1" style="float: right">

                            <Button @click="logout">退出<Icon type="ios-navigate"></Icon></Button>
                        </MenuItem>

                    </div>
                </Menu>
            </Header>
            <Layout>

                <Sider ref="side1" :style="{background: '#fff'}" hide-trigger collapsible :collapsed-width="78"
                       v-model="isCollapsed">
                    <Menu active-name="1"
                          theme="light"
                          width="auto"
                          :open-names="['1']">
                        <MenuItem name="1" to="/yxb_vue/home/tree">
                            <Icon type="ios-grid-outline" />
                            <span v-if="!isCollapsed">
                                公司结构
                            </span>
                        </MenuItem>
                        <Submenu name="2">
                            <template slot="title">
                                <Icon type="ios-square"></Icon>
                                <span v-if="!isCollapsed">
                                    部门管理
                                </span>
                            </template>
                            <MenuItem name="2-1" to="/yxb_vue/home/department">
                                部门列表
                            </MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="ios-keypad"></Icon>
                                <span v-if="!isCollapsed">
                                    分组管理
                                </span>
                            </template>
                            <MenuItem name="3-1" to="/yxb_vue/home/group">
                                分组列表
                            </MenuItem>
                        </Submenu>
                        <Submenu name="4">
                            <template slot="title">
                                <Icon type="ios-person"></Icon>
                                <span v-if="!isCollapsed">
                                    员工管理
                                </span>
                            </template>
                            <MenuItem name="4-1" to="/yxb_vue/home/member">
                                员工列表
                            </MenuItem>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <Breadcrumb :style="{margin: '24px 0'}" v-html="breadcrumb_item">
                    </Breadcrumb>
                        <router-view style="height: 75vh;background: #ffffff;padding: 10px"></router-view>
                </Layout>
            </Layout>
        </Layout>
</template>
<script>
    export default {

        data() {
            return {
                isCollapsed: false,
                current_rotate:0,
                breadcrumb_item:""
            }
        },
        mounted(){
            this.breadItemSet(this,this.$router.currentRoute.fullPath)
        },
        beforeRouteUpdate(to,from,next){
            this.breadItemSet(this,to.fullPath)
            next()
        },
        computed: {
            rotateIcon() {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },

            menuitemClasses() {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            collapsedSider() {
                this.$refs.side1.toggleCollapse();
            },
            breadItemSet(that,to){
                that.breadcrumb_item =''
                let paths = to.replace('/yxb_vue/','').split('/')

                for(let index in paths){
                    that.breadcrumb_item+='<span class="ivu-breadcrumb"><span class="ivu-breadcrumb-item-link">'+paths[index]+'</span> <span class="ivu-breadcrumb-item-separator">/</span></span>'
                }
            },
            logout(){
                this.$store.dispatch('doLogout').then((res)=>{
                    if(res.data.code===0){
                        this.$router.push("/yxb_vue/login")
                    }
                })

            }
        }
    }
</script>